<!--
 * @Description: 
 * @Version: 2.0
 * @Autor: zhangjx
 * @Date: 2023-05-27 17:05:22
 * @LastEditors: uphldjx 1373577124@qq.com
 * @LastEditTime: 2023-08-21 20:29:16
-->
<template>
	<div>
		<el-input placeholder="请输入内容" v-model="textValue" class="input-with-select" @change="handleChange">
			<template #append>
				<div @click="dialogVisible = true" style="width: 24px; height: 24px">
					<svgIcon :icon="textValue" style="font-size: 18px"></svgIcon>
				</div>
			</template>
		</el-input>
		<el-dialog title="选择图标" v-model="dialogVisible" append-to-body width="60%">
			<el-tabs v-model="activeName" tab-position="top">
				<el-tab-pane v-for="(item, index) in iconList" :key="index" :label="item.label" :name="item.label">
					<section class="main">
						<article v-for="(iconChi, index2) in item.list" :key="index2" @click="handleClick(iconChi)" class="item">
							<svgIcon :icon="iconChi" style="font-size: 28px"></svgIcon>
						</article>
					</section>
				</el-tab-pane>
			</el-tabs>
		</el-dialog>
	</div>
</template>

<script setup lang="ts">
import iconList from './iconList'

const props = defineProps<{
	modelValue?: string
}>()
const emit = defineEmits(['update:modelValue','change'])
const dialogVisible = ref(false)
const activeName = ref('WEB 菜单')

const textValue = ref('')
watch(
	() => props.modelValue,
	(val) => {
		textValue.value = props.modelValue
	},
	{
		immediate: true,
	}
)
const handleClick = (item) => {
	textValue.value = item
	emit('update:modelValue', item)
	emit('change', item)
	dialogVisible.value = false
}
const handleChange =()=> {
  emit('update:modelValue', textValue.value)
	emit('change', textValue.value)
}
</script>

<style scoped lang="scss">
.icon {
	width: vw(24);
	height: vw(24);
}

.main {
	display: flex;
	flex-flow: row wrap;
	justify-content: flex-start;
	max-height: 50vh;
	overflow-y: scroll;
}

.item {
	padding: 1rem;
	width: 60px;
	height: 60px;
}

.item:hover {
	cursor: pointer;
	background-color: #919fad;
	border-radius: 1rem;
	color: #000;
	transition: width 2s, background-color 1s;
}
</style>
